<template>
  <div>
    <tableComponents :pagination="{ currentPage, pageSize, total: list.all_num }" @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange" @sendUserSearch="receive_search" :searchData="userSearchData" :isHaveExport="false" :isHaveAdd="true"
        @toAdd="add_data" :isShow="true">
      <template v-slot:table>
        <!-- :data="list.data" -->
        <el-table ref="multipleTable" :data="list.data" stripe v-loading="loading" header-row-class-name="head_color" tooltip-effect="dark"
            style="width: 99.8%">
          <el-table-column label="员工头像" align="center" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <img :src="$fnc.getImgUrl(scope.row.avatar)" style="width:80px;height:80px;border-radius:50%;" alt />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="员工信息" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <span>员工账号：</span>
                <small>{{ scope.row.username || "----" }}</small>
                <br />
                <span>员工昵称：</span>
                <small>{{ scope.row.nickname || "----" }}</small>
                <br />
                <span>员工权重：</span>
                <small>{{ scope.row.staff_weight }}</small>
                <br />
                <span>负责员工数量：</span>
                <small>{{ scope.row.staff_num }}</small>
                <br />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="回复数据" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <span>回复总量：</span>
                <small>{{ scope.row.reply_count || 0 }}</small>
                <br />
                <span>本月回复量：</span>
                <small>{{ scope.row.reply_count_month || 0 }}</small>
                <br />
                <span>昨日回复量：</span>
                <small>{{ scope.row.reply_count_yesterday || 0 }}</small>
                <br />
                <span>今日回复量：</span>
                <small>{{ scope.row.reply_count_day || 0 }}</small>
                <br />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="速度信息" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <span>总回复速度：</span>
                <small>{{
                  secondsFormat(scope.row.reply_speed || "0.0000")
                }}</small>
                <br />
                <span>本月回复速度：</span>
                <small>{{
                  secondsFormat(scope.row.reply_speed_month || "0.0000")
                }}</small>
                <br />
                <span>昨日回复速度：</span>
                <small>{{
                  secondsFormat(scope.row.reply_speed_yesterday || "0.0000")
                }}</small>
                <br />
                <span>今日回复速度：</span>
                <small>{{
                  secondsFormat(scope.row.reply_speed_day || "0.0000")
                }}</small>
                <br />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单信息" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <span>总订单量：</span>
                <small>{{ scope.row.order_count || 0 }}</small>
                <br />
                <span>本月订单量：</span>
                <small>{{ scope.row.order_count_month || 0 }}</small>
                <br />
                <span>昨日订单量：</span>
                <small>{{ scope.row.order_count_yesterday || 0 }}</small>
                <br />
                <span>今日订单量：</span>
                <small>{{ scope.row.order_count_day || 0 }}</small>
                <br />
              </div>
            </template>
          </el-table-column>

          <el-table-column width="300" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="seeUserDetail(scope.row.id)" type="success">负责用户</el-button>
              <el-button size="mini" @click="addCLientaa(scope.row.id)" type="primary">拉取用户</el-button>
              <!-- <el-button size="mini" @click="add_client(scope.row.id)" type="primary">拉取用户</el-button> -->

              <el-button size="mini" @click="edit_weight(scope.row)" type="warning">修改权重</el-button>
              <el-button size="mini" @click="delUser(scope.row.id)" type="danger">删除员工</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>
    <el-dialog :close-on-click-modal="false" title="添加员工" :append-to-body="true" :modal-append-to-body="false" width="800px" :visible.sync="dialogFormVisible">
      <el-form :model="addMsg" ref="ruleForm" class="demo-ruleForm" label-width="120px">
        <el-form-item label="用户名">
          <el-col :span="12">
            <el-input placeholder="请选择用户" v-model="userName" :disabled="true" clearable></el-input>
          </el-col>
          <el-col :span="5" :offset="1">
            <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click="xzshop('xzuser')">选择用户</el-button>
          </el-col>
        </el-form-item>
        
        <el-form-item label="设置权重">
          <el-col :span="12">
            <el-input v-model="addMsg.staff_weight" placeholder="请输入员工权重"></el-input>
          </el-col>
        </el-form-item>
        
        <el-form-item>
          <el-button @click="add_ployee" type="primary">添加员工</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    
    <el-dialog :close-on-click-modal="false" title="修改权重" :append-to-body="true" width="780px" :visible.sync="dialogeditVisible">
      <el-form ref="ruleForm" class="demo-ruleForm" label-width="120px">
        <el-form-item label="员工昵称">
          <el-col :span="12">
            <el-input placeholder="请选择用户" v-model="edUser" :disabled="true" clearable></el-input>
          </el-col>
        </el-form-item>
        
        <el-form-item label="员工权重">
          <el-col :span="12">
            <el-input v-model="staff_weight" placeholder="请输入员工权重"></el-input>
          </el-col>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="comfirm_edit">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- <addclienta v-show="true"></addclienta> -->
    <!-- <xzuser v-show="personShow"></xzuser> -->
    <keep-alive>
      <component @closeShow="closea()" :is="current" :show="personShow" :isAll="true" showType="list" @sendShop="getSend" @isshow="getShow">
      </component>
    </keep-alive>
  </div>
</template>
<script>
import addclienta from "@/components/crm/addclient.vue";
import xzuser from "@/components/crm/xz_user.vue";
import uploadpic from "@/components/page/pic/up_pic"; //上传图片
import { crm_ployee } from "@/assets/js/searchData/searchData"; //引入搜索的数据
import xzShop from "@/components/currency/xz_shop.vue";
export default {
  data () {
    return {
      piclink: [],
      shows: true,
      current: "",
      shopinfo: {
        title: ""
      },
      userSearchData: crm_ployee,
      dialogeditVisible: false,
      // 输入值库
      edit_form: {
        piclink: ""
      },
      // editMsg: {},
      createTime: [],
      formVideo: {
        uid: "",
        uri: "",
        is_recommend: 0,
        // title: "",
        duration: "",
        start_time: "",
        stop_time: ""
      },
      dialogaddVisible: false,
      playurl: "",
      is_edit: false,
      dialogFormVisible: false,
      live_single: {
        piclink: ""
      },
      current: "",
      loading: false,
      list: [],
      allPage: 0,
      allNum: 0,
      pageSize: 10,
      currentPage: 1,
      searchAll: {},
      row: {},
      showCity: true,
      // 头像
      dialogImageUrl: "",
      dialogVisible: false,
      // 分类
      edmsgs: {},
      siteid: "",
      siteobj: {},
      changePriceFlag: false,
      nowPlace: "",
      timeMsg: [],
      wanna_del: "",
      multipleSelection: [], //多选框玄宗的值
      edit_msg: {},
      staff_weight: "",
      addMsg: {}, // 添加用户的数据
      personShow: false,
      userName: "",
      edUser: "",
      nowP: ""
    };
  },
  components: {
    uploadpic,
    xzuser,
    addclienta
  },
  mounted () {
    this.getUserList();
  },
  methods: {
    addCLientaa (id) {
      this.nowP = id;
      this.xzshop("addclienta");
    },
    secondsFormat (s) {
      s = parseInt(s);
      var day = Math.floor(s / (24 * 3600)); // Math.floor()向下取整
      var hour = Math.floor((s - day * 24 * 3600) / 3600);
      var minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60);
      var second = s - day * 24 * 3600 - hour * 3600 - minute * 60;
      return day + "天" + hour + "时" + minute + "分" + second + "秒";
    },
    // console.log(secondsFormat(5555555)) // 64天7时12分35秒

    add_ployee () {
      let params = this.addMsg;
      this.$api.getCrm.add_ployee(params).then(res => {
        if (res.data.code == 200) {
          this.$swal("添加成功！", "员工已经成功添加", "success");
          this.addMsg = {};
          this.userName = "";
          this.dialogFormVisible = false;
          this.getUserList();
          return;
        }
        this.$swal("添加失败！", res.data.code_desc, "error");
        this.dialogFormVisible = false;
      });
    },
    edit_weight (row) {
      // 修改权重
      this.staff_weight = row.staff_weight;
      this.edit_msg.id = row.id;
      this.edUser = row.nickname;
      this.dialogeditVisible = true;
    },
    comfirm_edit () {
      // 确定修改
      let params = this.edit_msg;
      params.staff_weight = this.staff_weight;
      this.$api.getCrm.edit_ployee_weight(params).then(res => {
        if (res.data.code == 200) {
          this.$swal("修改成功！", "您已经修改了这个员工的权重。", "success");
          this.getUserList();
        } else {
          this.$swal("修改失败！", res.data.result, "error");
        }
        this.dialogeditVisible = false;
      });
    },
    add_client (id) {
      // 拉取用户
      this.$store.commit("addbreadcrumbs", {
        title: "拉取用户",
        url: `/index/page/public_user?id=${id}`
      });
      this.$router.push(`/index/page/public_user?id=${id}`);
    },
    delUser (id) {
      let params = {};
      params.id = id;
      this.$swal({
        title: "您确定要删除这个员工吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          this.$api.getCrm.del_ployee(params).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这个员工。", "success");
              this.getUserList();
            } else {
              this.$swal("删除失败！", res.data.result, "error");
            }
          });
        }
      });
    },
    getUserList (obj) {
      this.$api.getCrm.getUserList(obj).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
      });
    },
    seeUserDetail (id) {
      this.$store.commit("addbreadcrumbs", {
        title: "负责用户",
        url: `/index/page/crm_client?id=${id}`
      });
      this.$router.push(`/index/page/crm_client?id=${id}`);
    },

    // 编辑
    toedit (item) {
      this.dialogeditVisible = true;
      this.edmsgs = item;
    },

    format (value) {
      let time = new Date(parseInt(value) * 1000);
      time =
        time.toLocaleDateString().replace(/\//g, "-") +
        " " +
        time.toTimeString().substr(0, 8);
      return time;
    },
    xzshop (str) {
      this.current = str;
      this.personShow = true;
    },
    getShow (val) {
      this.personShow = val;
    },
    getSend (row, flag) {
      // console.log(flag);
      if (flag) {
        let params = {};
        params.id = this.nowP;
        params.id_str = row.id;
        console.log(params);
        this.$api.getCrm.addClient(params).then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.$swal("拉取成功！", "您拉取了这个员工。", "success");
            this.getUserList();
            return;
          }
          this.$swal("拉取失败！", res.data.result, "error");
        });
      } else {
        if (this.current == "xzShop") {
          this.shopinfo = row;
          this.formVideo.pid = row.id;
        }
        this.userName = row.username;
        this.addMsg.id = row.id;
      }
    },

    editbtn (item) {
      this.edit_form = item;
      this.dialogeditVisible = true;
    },

    addbtn () { },

    rev_send_url (val) {
      this.formVideo.uri = val.url;
    },
    add_data () {
      this.dialogFormVisible = true;
    },
    change_recomment (val, row, type) {
      var params = {};
      params.id = row.id;
      if (type == "recomment") {
        params.is_recommend = val;
      } else {
        params.is_check = val;
      }
      this.$api.getPage.edit_reply_isrecommend(params).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess(res.data.result);
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    dia_close () {
      this.playurl = "";
      var x = document.getElementById("videobox");
      x.load();
    },
    showvideo (info) {
      this.dialogFormVisible = true;
      if (info.uri.indexOf("http") < 0) {
        this.playurl =
          "https://inexweb.oss-cn-shenzhen.aliyuncs.com/" + info.uri;
      } else {
        this.playurl = info.uri;
      }
      this.$nextTick(() => {
        var x = document.getElementById("videobox");
        x.load();
      });
    },
    receive_search (obj) {
      this.searchAll = obj;
      this.getUserList(obj);
    },
    getNewsAll (params) {
      params.id = this.$route.query.id;
      this.$api.getCrm.getUserList(params).then(res => {
        if (res.data.code === 200) {
          this.loading = false;
          this.list = res.data.result;
        }
      });
    },
    handleSizeChange (val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },

    reload () {
      this.getNewsAll(this.searchAll);
    },
    // 添加图片
    handleRemove (file, fileList) { },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 删除
    beforeCreate () { }
  }
};
</script>

<style lang="less" scoped>
.myblank button {
  margin: 5px 5px 0 0;
}

.place {
  margin: 5px 0;
}
.is_item {
  display: flex;
  align-items: flex-end;
  .types {
    div {
      width: 200px;
      margin-right: 10px;
    }
    .input {
      margin: 5px 0px;
    }
    display: flex;
  }
  .btn_edit {
    height: 40px;
    margin-left: 10px;
    margin-bottom: 5px;
  }
}
.know_btn {
  width: 100%;
  display: flex !important;
  justify-content: flex-end !important;
}
</style>
